<template>
    <div class="wrapper" @click="cateShow = !cateShow">
        <filter-report :visible=true :cateShow="cateShow" :type="1" ></filter-report>

        <el-table
            :data="tableData" 
            stripe 
            border 
            height="560">
            <el-table-column prop="deptName" width="140" fixed label="部门/团队"></el-table-column>
            <el-table-column v-if="tableType == 'teamPerson'" prop="name" label="销售员"></el-table-column>
            <el-table-column v-if="showList[0]" prop="zeroType" label="0类"></el-table-column>
            <el-table-column v-if="showList[1]" prop="oneType" label="1类"></el-table-column>
            <el-table-column v-if="showList[2]" prop="twoType" label="2类"></el-table-column>
            <el-table-column v-if="showList[3]" prop="threeType" label="3类"></el-table-column>
            <el-table-column v-if="showList[4]" prop="fourType" label="4类"></el-table-column>
            <el-table-column v-if="showList[5]" prop="fiveType" label="5类"></el-table-column>
            <el-table-column v-if="showList[6]" prop="sixType" label="6类"></el-table-column>
            <el-table-column v-if="showList[7]" prop="sevenType" label="7类"></el-table-column>
            <el-table-column v-if="showList[8]" prop="eightType" label="8类"></el-table-column>
            <el-table-column prop="newType" label="新录资源"></el-table-column>
            <el-table-column prop="allCount" label="总计"></el-table-column>
            <el-table-column prop="percent" label="占比"></el-table-column>
        </el-table>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import FilterReport from '~components/filterReport.vue'
    import { getTime,getDate,getYesterday,getSevenDaysBefore } from '~/utils/auth'
    import {OWNER_LIST} from '../../store/mutation-types/report/index';
    import { Radio,RadioGroup, RadioButton, Table, TableColumn} from 'element-ui'
    Vue.use(Radio);
    Vue.use(RadioGroup);
    Vue.use(RadioButton);
    Vue.use(Table);
    Vue.use(TableColumn);

    export default {
        components: {
            FilterReport
        },
        head(){
            return {
                title: "客户所有者统计",
                meta: [
                    { hid: 'ownereport', name: 'ownerreport', content: 'ownerreport'}
                ]
            }
        },
        data () {
            return {
                tabName: '客户所有者统计',
                tableType:'department',
                hasData: true,
                cateShow: false,
                showList:[true,true,true,true,true,true,true,true,true],
                category:[],
                showType: '0',
                tableData: [],
                filter : {
                    startDate:"",
                    endDate:"",
                    customerlevel: '',//客户类型
                    deptId: '',
                    usId:'',
                    flag:''
                }
            }
        },
        watch:{
            category(){
                if(this.category.length ==0){
                    this.showList = [true,true,true,true,true,true,true,true,true]
                }else{
                    for(let i = 0; i<=8;i++){
                       this.showList[i] = (this.category.indexOf(i+"类") !== -1)? true : false;
                    }
                }
                
            }
        },
        computed: {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            })
        },
        methods: {
            getFilterData(data){
                //this.filter.startDate = data.dateRange[0]?getDate(data.dateRange[0]):getSevenDaysBefore(new Date());
                //this.filter.endDate =  data.dateRange[1]?getDate(data.dateRange[1]):getYesterday(new Date());
                // this.filter.startDate = data.dateRange[0]?getDate(data.dateRange[0]):getDate(new Date());
                // this.filter.endDate =  data.dateRange[1]?getDate(data.dateRange[1]):getDate(new Date());
                this.filter.startDate = data.date?getDate(data.date):getYesterday(new Date());
                this.filter.endDate =  data.date?getDate(data.date):getYesterday(new Date());
                this.filter.customerlevel = data.customerlevel;
                this.filter.deptId = data.deptId;
                this.filter.usId = data.usId;
                this.userName = data.userName;
                this.category = data.category;
                this.filter.flag = data.flag;
                if(this.filter.flag == 2 || this.filter.flag == 1){
                    this.tableType = "teamPerson"//团队//个人
                }else if(this.filter.flag == 0){
                    this.tableType = "department"//部门
                }
                // this.tableType = this.filter.usId ? "0" : "1";
                this.getOwnerData(this.filter);
            },
            getOwnerData(filter) {
                this.tableData = [];
                this.$store.dispatch('getOwnerList',filter)
                    .then((response) => {
                    let result = response.data;
                    if (result && result.data && result.data.list && result.data.list.length>0) {
                        var dataList = result.data.list;
                        this.tableType = result.data.isNormalUser?"teamPerson":"department"//如果部门下只有人，怎按团队展示
                        
                        let allCountList = result.data.countTotalDTO;
                        let allPercentList = result.data.percentDTO;
                        for(let i =0; i<dataList.length; i++){
                            let all = 0;
                            if(this.showList[0]) all += dataList[i].zeroType;
                            if(this.showList[1]) all += dataList[i].oneType;
                            if(this.showList[2]) all += dataList[i].twoType;
                            if(this.showList[3]) all += dataList[i].threeType;
                            if(this.showList[4]) all += dataList[i].fourType;
                            if(this.showList[5]) all += dataList[i].fiveType;
                            if(this.showList[6]) all += dataList[i].sixType;
                            if(this.showList[7]) all += dataList[i].sevenType;
                            if(this.showList[8]) all += dataList[i].eightType;
                            all += dataList[i].newType;
                            dataList[i].allCount = all;
                        }
                        
                        let total = 0;
                        if(this.showList[0]) total += (allCountList.zeroTypeTotal ||0);
                        if(this.showList[1]) total += (allCountList.oneTypeTotal ||0);
                        if(this.showList[2]) total += (allCountList.twoTypeTotal ||0);
                        if(this.showList[3]) total += (allCountList.threeTypeTotal ||0);
                        if(this.showList[4]) total += (allCountList.fourTypeTotal ||0);
                        if(this.showList[5]) total += (allCountList.fiveTypeTotal ||0);
                        if(this.showList[6]) total += (allCountList.sixTypeTotal ||0);
                        if(this.showList[7]) total += (allCountList.sevenTypeTotal ||0);
                        if(this.showList[8]) total += (allCountList.eightTypeTotal ||0);
                        total += (allCountList.newTypeTotal ||0);

                        let countTotalDTO = {
                            deptName : "总计",
                            userName : "",
                            zeroType : allCountList.zeroTypeTotal,
                            oneType : allCountList.oneTypeTotal,
                            twoType : allCountList.twoTypeTotal,
                            threeType : allCountList.threeTypeTotal,
                            fourType : allCountList.fourTypeTotal,
                            fiveType : allCountList.fiveTypeTotal,
                            sixType : allCountList.sixTypeTotal,
                            sevenType : allCountList.sevenTypeTotal,
                            eightType : allCountList.eightTypeTotal,
                            newType : allCountList.newTypeTotal,
                            allCount : ""
                            //allCount : total
                        }
                        let percentDTO = {
                            deptName:"占比",
                            userName : "",
                            zeroType : allPercentList.zeroTypePercent,
                            oneType : allPercentList.oneTypePercent,
                            twoType : allPercentList.twoTypePercent,
                            threeType : allPercentList.threeTypePercent,
                            fourType : allPercentList.fourTypePercent,
                            fiveType : allPercentList.fiveTypePercent,
                            sixType : allPercentList.sixTypePercent,
                            sevenType : allPercentList.sevenTypePercent,
                            eightType : allPercentList.eightTypePercent,
                            newType : allPercentList.newTypePercent,
                            //allCount : allPercentList.allCountTotalPercent || "100%"
                        }
                        this.tableData = dataList;
                        if(this.tableType == 'department'){
                            countTotalDTO.deptName = "总计";
                            percentDTO.deptName = "占比";
                            countTotalDTO.name = "";
                            percentDTO.name = "";
                        }else{
                            countTotalDTO.deptName = "";
                            percentDTO.deptName = "";
                            countTotalDTO.name = "总计";
                            percentDTO.name = "占比";
                        }
                        this.tableData.push(countTotalDTO);
                        this.tableData.push(percentDTO);
                        // this.tableData.forEach((n,i)=>{
                        //     if(this.tableData[i].name !='总计' && this.tableData[i].name !='占比'){
                        //         this.tableData[i].name = this.userName;
                        //     }
                        // })
                            
                    }
                })
            }
        },
        created () {
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        }
    }

</script>

<style scoped lang="scss">
    .wrapper{
        min-height: 500px;
    }
    .button-group {
        position: relative;
        margin: 30px 0;
    }
    .no-data {
        width: 100%;
        text-align: center;
    }
</style>